<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>入住人管理 - 活力长者社区</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .occupant-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px;
        }

        .occupant-header {
            margin-bottom: 30px;
        }

        .occupant-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            padding: 25px;
            margin-bottom: 25px;
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }

        .table th {
            font-weight: 600;
            background-color: #f8f9fa;
        }

        .status-badge {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.85rem;
        }

        .status-active {
            background-color: #d1e7dd;
            color: #0f5132;
        }

        .status-inactive {
            background-color: #f8d7da;
            color: #842029;
        }

        .btn-add {
            background-color: #28a745;
            color: white;
            padding: 8px 20px;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 20px;
        }

        .btn-add:hover {
            background-color: #218838;
            color: white;
        }

        .action-link {
            color: #007bff;
            text-decoration: none;
            margin-right: 15px;
        }

        .action-link:hover {
            text-decoration: underline;
        }

        .empty-state {
            text-align: center;
            padding: 50px 0;
        }

        .empty-icon {
            font-size: 5rem;
            color: #e9ecef;
            margin-bottom: 20px;
        }

        .empty-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .empty-text {
            color: #6c757d;
            max-width: 500px;
            margin: 0 auto 30px;
        }
        .property-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            padding: 25px;
            margin-top: 25px;
        }
        .property-card h3.card-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }
        .property-table th {
            font-weight: 600;
            background-color: #f8f9fa;
        }
        .property-buttons a {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<c:import url="header.jsp" />

<div class="occupant-container">
    <div class="occupant-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h2>入住人管理</h2>
                <p class="text-muted mb-0">管理您房产中的入住人信息</p>
            </div>
            <a href="AddOccupantServlet" class="btn-add">
                <i class="bi bi-person-plus"></i> 添加入住人
            </a>
        </div>
    </div>

    <c:if test="${not empty error}">
        <div class="alert alert-danger">${error}</div>
    </c:if>

    <div class="occupant-card">
        <h3 class="card-title">入住人列表</h3>

        <c:choose>
            <c:when test="${not empty occupants && not empty purchasedHouses}">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>身份证号</th>
                            <th>与您关系</th>
                            <th>入住类型</th>
                            <th>入住时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${occupants}" var="occupant">
                            <tr>
                                <td>${occupant.occupantName}</td>
                                <td>${occupant.age}</td>
                                <td>${occupant.gender}</td>
                                <td>${occupant.idCard}</td>
                                <td>${occupant.relationship}</td>
                                <td>${occupant.residenceType}</td>
                                <td>
                                    <fmt:formatDate value="${occupant.startTime}" pattern="yyyy-MM-dd"/>
                                </td>
                                <td>
                                    <c:choose>
                                        <c:when test="${empty occupant.endTime}">
                                            <span class="status-badge status-active">入住中</span>
                                        </c:when>
                                        <c:otherwise>
                                            <span class="status-badge status-inactive">已离开</span>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>
                                    <a href="EditOccupantServlet?id=${occupant.residenceId}" class="action-link">编辑</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </c:when>
            <c:otherwise>
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="bi bi-people"></i>
                    </div>
                    <h3 class="empty-title">暂无入住人信息</h3>
                    <p class="empty-text">
                        您尚未为任何房产添加入住人，请点击下方按钮添加新的入住人。
                    </p>
                    <a href="AddOccupantServlet" class="btn btn-primary">添加入住人</a>
                </div>
            </c:otherwise>
        </c:choose>
    </div>

    <div class="property-card">
        <h3 class="card-title">我的房产状态管理</h3>
        <c:choose>
            <c:when test="${not empty purchasedHouses}">
                <table class="table property-table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>房产名称</th>
                        <th>楼栋号</th>
                        <th>单元号</th>
                        <th>房间号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${purchasedHouses}" var="house">
                        <tr>
                            <td>${house.houseId}</td>
                            <td>${house.houseName}</td>
                            <td>${house.buildingNumber}</td>
                            <td>${house.unitNumber}</td>
                            <td>${house.roomNumber}</td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="statusDropdown${house.houseId}" data-bs-toggle="dropdown" aria-expanded="false">
                                        选择状态
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="statusDropdown${house.houseId}">
                                        <li><a class="dropdown-item" href="#" onclick="updateStatus(${house.houseId}, '入住')">入住</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="updateStatus(${house.houseId}, '出租')">出租</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="updateStatus(${house.houseId}, '空置')">空置</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </c:when>
            <c:otherwise>
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="bi bi-house"></i>
                    </div>
                    <h3 class="empty-title">暂无房产信息</h3>
                    <p class="empty-text">
                        您尚未拥有任何房产，请先添加房产信息。
                    </p>
                </div>
            </c:otherwise>
        </c:choose>
    </div>

    <script>
        function updateStatus(houseId, status) {
            // 更新按钮文本
            document.getElementById('statusDropdown' + houseId).innerText = status;

            // 发送请求到服务器以保存状态（这里使用fetch API作为示例）
            fetch('/updateHouseStatus', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    houseId: houseId,
                    status: status
                })
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
        }
    </script>
</div>

<c:import url="footer.jsp" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>